<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交订单</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/jquery.step.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.step.min.js"></script>
	</head>
	<body>
		<div id="web">
			<!--顶部-->
			<div class="top">
				<div class="top_login clearfix">
					<span class="fl t_lef"><a href="register_4.html">注册</a>|<a href="register_4.html">登录</a>|<a href="register_4_vip.html">VIP登录</a></span>
					<span class="fr t_rig"><a href="shopping_4.html">付款</a>|<a href="register_4.html">我的订单</a>|<a href="settle_4.html"><img src="img/gouwuche.png"/ style="vertical-align: middle;padding-right: 5px;"><b>(0)</b></a></span>
				</div>
			</div>
			<!--logo-->
			<div class="search clearfix">
				<div class="logo">
					<a href="index.html"><img src="img/logo.jpg" /></a>
				</div>
				<!--订单页面的订单部分-->
				<div class="main">
					<div id="step" class="clearfix"></div>
					<div class="btns">
						<button id="prevBtn">上一步</button>
						<button id="nextBtn">下一步</button>
						<button id="btn1">跳到第二步</button>
						<button id="btn2">跳到第三步</button>
					</div>
					<div class="info">index：<span id="index"></span></div>
				</div>
			</div>
			<hr />
			<!--以上是页面头部-->
			
			<!--收银台-->
			<div class="sub_order clearfix">
				<div class="shou_yin_tai">
					<span>收银台</span>
				</div>
				<p>订单提交成功，请您尽快付款！订单号：241858848rew5464545（某某某自营店）   1874845244gfhdrfw48565846（某某某自营店）</p>
				<p>请您在订单提交后72小时内完成支付，否则订单会自动取消</p>
				<form action="" method="post">
					<div class="pay_for">
						<input type="radio" name="pay" id="pay_1" value="" />
						<label for="pay_1"><img src="img/pay_baby.jpg"/></label>
					</div>
					<div class="pay_for">
						<input type="radio" name="pay" id="pay_2" value="" />
						<label for="pay_2"><img src="img/WX.jpg"/></label>
					</div>
					<div class="pay_for">
						<input type="radio" name="pay" id="pay_3" value="" />
						<label for="pay_3"><img src="img/zai_xian_pay.jpg"/></label>
					</div>
					<div class="fr">
						<span>应付余额：<b>￥750.00</b>元</span><a href="shopping_4.html">提交订单</a>
					</div>
				</form>
			</div>
			
			<!--底部-->
			<div class="di_bu">
				<div class="di_bu_main clearfix">
					<ul class="ul">
						<li>
							<img class="fl" src="img/you.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">品质保障</a></span><br />
								<span><a href="">品质保证</a> <a href="">购物无忧</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/sheng.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">特色服务</a></span><br />
								<span><a href="">针对户型</a> <a href="">私人定制</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/te.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">全网最低</a></span><br />
								<span><a href="">厂家直销</a> <a href="">低价承诺</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/figure.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">帮助中心</a></span><br />
								<span><a href="">您的购物指南</a></span>
							</div>
						</li>
					</ul>

					<ul class="di_bu_nav clearfix">
						<li>
							<a href="">新手指南</a><br />
							<span><a href="">新手指南</a></span><br />
							<span><a href="">购物流程</a></span>
						</li>
						<li>
							<a href="">支付方式</a><br />
							<span><a href="">支付宝</a></span><br />
							<span><a href="">微信支付</a></span>
						</li>
						<li>
							<a href="">物流配送</a><br />
							<span><a href="">配送方式</a></span><br />
							<span><a href="">服务流程</a></span>
						</li>
						<li>
							<a href="">客服中心</a><br />
							<span><a href="">在线客服</a></span><br />
							<span><a href="">常见问题</a></span></a>
						</li>
						<li>
							扫一扫，关注鲁班兄弟<br />
							<img src="img/QR.jpg" />
						</li>
					</ul>
				</div>
			</div>

			<!--版权尾部-->
			<footer>
				<div class="foot">
					<span>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035771</span> |
					<a href="">关于我们</a>|
					<a href="">联系我们</a>|
					<a href="">法律声明</a>
				</div>
			</footer>
		</div>
	</body>
	<script type="text/javascript">
		var $step = $("#step");
		var $index = $("#index");

		$step.step({
			index: 0,
			time: 500,
			title: ["购物车", "提交订单", "确认订单"]
		});

		$index.text($step.getIndex());

		$("#prevBtn").on("click", function() {
			$step.prevStep();
			$index.text($step.getIndex());
		});

		$("#nextBtn").on("click", function() {
			$step.nextStep();
			$index.text($step.getIndex());
		});

		$("#btn1").on("click", function() {
			$step.toStep(1);
			$index.text($step.getIndex());
		});

		$("#btn2").on("click", function() {
			$step.toStep(2);
			$index.text($step.getIndex());
		});
	</script>
</html>
